import tradeAvatar from "@/views/trade/withdraw/components/tradeAvatar";
import { columns, statusListOptions, tableActiveKey } from "./store";
import { fetchList, handleAction } from ".";
export const tablePage = renderTablePage();
export const tableData = ref<any>([]);
export const tableLoading = ref(false);
const defineBodyCellMap = (number, { value, text, index, column, record }) => {
  const widthdrawDetailMap = {
    0: "withdrawApi.queryDataById",
    1: "",
  };
  const renderStatus = () => (
    <div>
      <i class={record.status === 2 ? "s-52c41a" : "s-c1c1c1"}>
        {selectDictLabel(statusListOptions.value, record.status)}
      </i>
    </div>
  );
  const renderWithdrawAmount = () => (
    <div>
      <i>{(Math.round(value * 100) / 100).toFixed(2)}</i>
    </div>
  );
  const renderAvatar = () => (
    <div>
      <tradeAvatar
        data={value}
        nicknameTextColor="#333"
        isShowSexIcon={true}
        style="flex: none;margin: 0 10px;"
      />
    </div>
  );

  const renderAction = () => (
    <div>
      {withDirectivePower({
        vNode: (
          <div class="s-table-body_cell">
            {renderDetail.call({
              record,
              handleAction,
              identify: widthdrawDetailMap[number],
            })}
            <a-divider type="vertical" />
          </div>
        ),
        bindingValue: "withdrawApi.queryDataById",
      })}
      {+record.status === 0 ? (
        <>
          {withDirectivePower({
            vNode: (
              <div class="s-table-body_cell">
                {renderAgree.call({
                  record,
                  handleAction,
                  identify: "withdrawApi.updateAgree",
                })}
                <a-divider type="vertical" />
              </div>
            ),
            bindingValue: "withdrawApi.updateAgree",
          })}
          {withDirectivePower({
            vNode: renderRefuse.call({
              record,
              handleAction,
              identify: "withdrawApi.updateRefuse",
            }),
            bindingValue: "withdrawApi.updateRefuse",
          })}
        </>
      ) : null}
    </div>
  );
  return new Map([
    [{ key: "index", state: /[0]/ }, renderIndex],
    [{ key: "status", state: /[0]/ }, renderStatus],
    [{ key: "withdraw_amount", state: /[0]/ }, renderWithdrawAmount],
    [{ key: "user_info", state: /[0]/ }, renderAvatar],
    [{ key: "action", state: /[0]/ }, renderAction],
  ]);
};

const handleRenderBodyCellTask = (number, props) => {
  const array = [...defineBodyCellMap(number, props)].filter(
    ([object]) => object.key === props.column.key && object.state.test(number)
  );
  const _this = { number, tablePage, ...props };
  return array.map(([, value]) => value.call(_this));
};

export const tableConfig = () => {
  const defineTable = {
    pagination: tablePage,
    components: {
      tradeAvatar,
    },
    loading: tableLoading,
    on: {
      change(paging: { current: number; pageSize: number }) {
        tablePage.current = paging.current;
        tablePage.pageSize = paging.pageSize;
        fetchList();
      },
    },
    columns,
    dataSource: tableData,
    tableSlot: {
      bodyCell: (props) =>
        handleRenderBodyCellTask(tableActiveKey.value, props),
    },
  };
  return defineTable;
};
